<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑员工信息 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/employee-view.css}">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="employee-view-container">
        <!-- 返回按钮 -->
        <div class="back-container">
            <a th:href="@{/employee}" class="btn btn-back">← 返回员工列表</a>
            <a th:href="@{'/employee/view/' + ${employee.userId}}" class="btn btn-back">← 返回详情</a>
        </div>

        <!-- 页面标题 -->
        <div class="module-header">
            <h1 class="module-title">编辑员工信息</h1>
        </div>

        <!-- 编辑表单 -->
        <form th:action="@{'/employee/edit/' + ${employee.userId}}" method="post" class="employee-card">
            <!-- 基本信息区 -->
            <div class="info-section">
                <h2 class="section-title">基本信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">工号：</label>
                        <input type="text" class="form-control" th:value="${employee.username}" readonly>
                    </div>
                    <div class="info-item">
                        <label class="info-label">姓名：</label>
                        <input type="text" class="form-control" th:field="*{employee.realName}">
                    </div>
                    <div class="info-item">
                        <label class="info-label">性别：</label>
                        <select class="form-control" th:field="*{employee.gender}">
                            <option th:each="gender : ${genders}"
                                    th:value="${gender}"
                                    th:text="${gender}"></option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- 身份信息区 -->
            <div class="info-section">
                <h2 class="section-title">身份信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">身份证号：</label>
                        <input type="text" class="form-control" th:field="*{employee.idNumber}">
                    </div>
                    <div class="info-item">
                        <label class="info-label">出生日期：</label>
                        <input type="date" class="form-control" th:field="*{employee.birthday}">
                    </div>
                </div>
            </div>

            <!-- 工作信息区 -->
            <div class="info-section">
                <h2 class="section-title">工作信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">部门：</label>
                        <select class="form-control" name="departmentID"
                                th:field="*{employee.departmentID}">
                            <option value="">选择部门</option>
                            <option th:each="dept : ${departments}"
                                    th:value="${dept.departmentID}"
                                    th:text="${dept.departmentName}"
                                    th:selected="${employee.departmentID != null && employee.departmentID.departmentID == dept.departmentID}">
                            </option>
                        </select>
                    </div>
                    <div class="info-item">
                        <label class="info-label">职位：</label>
                        <select class="form-control" name="jobPositionID"
                                th:field="*{employee.jobPositionID}">
                            <option value="">选择职位</option>
                        </select>
                    </div>
                    <div class="info-item">
                        <label class="info-label">入职日期：</label>
                        <input type="date" class="form-control" th:field="*{employee.startingDate}">
                    </div>
                    <div class="info-item" th:if="${roleIdValue lt 3}">
                        <label class="info-label">状态：</label>
                        <select class="form-control" th:field="*{employee.status}">
                            <option value="true">在职</option>
                            <option value="false">离职</option>
                        </select>
                    </div>
                </div>
            </div>

            <script th:inline="javascript">
                document.addEventListener('DOMContentLoaded', function() {
                    const departmentSelect = document.querySelector('select[name="departmentID"]');
                    const positionSelect = document.querySelector('select[name="jobPositionID"]');
                    const allPositions = /*[[${positions}]]*/ [];

                    // 加载所有职位
                    function loadAllPositions() {
                        positionSelect.innerHTML = '<option value="">选择职位</option>';
                        allPositions.forEach(position => {
                            const option = document.createElement('option');
                            option.value = position.positionId;
                            option.textContent = position.positionName;
                            if (position.positionId === /*[[${employee.jobPositionID.positionId}]]*/ '') {
                                option.selected = true;
                            }
                            option.dataset.departmentId = position.departmentID.departmentID;
                            positionSelect.appendChild(option);
                        });
                    }

                    // 部门变更时更新职位选项
                    departmentSelect.addEventListener('change', function() {
                        const departmentId = this.value;

                        if (!departmentId) {
                            // 选择了"全部部门"，显示所有职位
                            loadAllPositions();
                            return;
                        }

                        positionSelect.innerHTML = '<option value="">选择职位</option>';

                        fetch('/api/positions/by-department/' + departmentId)
                            .then(response => response.json())
                            .then(positions => {
                                positions.forEach(position => {
                                    const option = document.createElement('option');
                                    option.value = position.positionId;
                                    option.textContent = position.positionName;
                                    if (position.positionId === /*[[${employee.jobPositionID.positionId}]]*/ '') {
                                        option.selected = true;
                                    }
                                    positionSelect.appendChild(option);
                                });
                            });
                    });

                    // 职位变更时更新部门
                    positionSelect.addEventListener('change', function() {
                        const positionId = this.value;
                        if (positionId) {
                            const selectedOption = this.options[this.selectedIndex];
                            if (selectedOption.dataset.departmentId) {
                                departmentSelect.value = selectedOption.dataset.departmentId;
                            }
                        }
                    });

                    // 初始化
                    if (departmentSelect.value) {
                        departmentSelect.dispatchEvent(new Event('change'));
                    } else {
                        loadAllPositions();
                    }
                });
            </script>

            <!-- 教育信息区 -->
            <div class="info-section">
                <h2 class="section-title">教育信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">学历：</label>
                        <input type="text" class="form-control" th:field="*{employee.education}">
                    </div>
                    <div class="info-item">
                        <label class="info-label">专业：</label>
                        <input type="text" class="form-control" th:field="*{employee.major}">
                    </div>
                </div>
            </div>

            <!-- 联系信息区 -->
            <div class="info-section">
                <h2 class="section-title">联系信息</h2>
                <div class="info-grid">
                    <div class="info-item">
                        <label class="info-label">邮箱：</label>
                        <input type="email" class="form-control" th:field="*{employee.email}">
                    </div>
                    <div class="info-item">
                        <label class="info-label">电话：</label>
                        <input type="tel" class="form-control" th:field="*{employee.phone}">
                    </div>
                </div>
            </div>

            <!-- 表单操作按钮 -->
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">保存更改</button>
                <button type="button" class="btn btn-cancel" onclick="window.history.back()">取消</button>
            </div>
        </form>
    </main>
</div>
</body>
</html>